<template>
    <div class="body">
        <Title title-one="概览" title-two="首页"></Title>
        <el-row style="margin-top: 10px;" v-if="$store.state.userInfo.groups == 1">
            <el-col :span="9">
                <div class="block">
                    <span class="demonstration" style="margin: 0 15px;">时间</span>
                    <el-date-picker
                        v-model="value5"
                        type="daterange"
                        align="left"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions2"
                    >
                    </el-date-picker>
                </div>
            </el-col>

            <el-col :span="13">
                <el-form :inline="true" class="demo-form-inline" :model="params">
                    <el-form-item label="工号">
                        <el-input placeholder="工号" v-model="params.username"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input placeholder="姓名" v-model="params.first_name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="2">
                <el-button @click="extendExel" v-if="$store.state.userInfo.groups == 1">导出</el-button>
            </el-col>
        </el-row>

        <el-table
            ref="multipleTable"
            :data="Order"
            tooltip-effect="dark"
            style="width: 100%;"
            show-summary
            @selection-change="handleSelectionChange"
            max-height="580">
            <el-table-column
                fixed
                prop="meal_supplement_balances.users.username"
                label="工号"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                prop="meal_supplement_balances.users.first_name"
                label="姓名"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                prop="order_price"
                label="消费金额"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                prop="uid"
                label="订单号"
                align="center"
                width="300">
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="消费时间"
                align="center"
                width="300">
            </el-table-column>
            <el-table-column
                prop="history_meal_supplement_balance"
                label="餐补余额"
                align="center"
            >
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {getOrder} from '../../api/api'
    import XLSX from 'xlsx';

    export default {
        name: "ConsumptionStatistics",
        data() {
            return {
                params: {
                    username: '',
                    first_name: '',
                    start_time: '',
                    end_time: '',
                },
                pickerOptions2: {
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                end.setTime(start.getTime());
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '昨天',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                },
                value5: '',
                Order: []
            }
        },
        created() {
            this.listOrder(this.params);
        },
        methods: {
            listOrder(params) {
                getOrder(params).then(res => {
                    this.Order = res.data;
                    console.log(this.$store.state.userInfo.groups);
                }).catch(err => {
                    console.log(err);
                })
            },
            search() {
                this.params.start_time = this.value5[0];
                this.params.end_time = this.value5[1];
                this.listOrder(this.params);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            extendExel() {
                var title = ['工号', '姓名', '消费金额', '订单号', '消费时间', '餐补余额'];
                var ws = XLSX.utils.aoa_to_sheet([title]);
                /* Write data starting at A2 */
                this.Order.forEach((element, index) => {
                    XLSX.utils.sheet_add_aoa(ws, [[element.meal_supplement_balances.users.username, element.meal_supplement_balances.users.first_name, element.order_price, element.uid, element.created_at, element.history_meal_supplement_balance]], {origin: "A" + (index + 2)});
                });
                //
                // var worksheet = XLSX.utils.json_to_sheet(json);
                var new_workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(new_workbook, ws, "SheetJS");
                let dateStr = new Date();
                let year = dateStr.toLocaleDateString();
                XLSX.writeFile(new_workbook, year + "-消费统计.xlsx");
            }
        }
    }
</script>

<style scoped>

</style>
